<template>
  <van-sticky>
    <van-nav-bar
      title="密码修改"
      left-text="返回"
      left-arrow
      @click-left="$router.replace('/home')"
    />
  </van-sticky>
 
  <van-form ref="form" validate-trigger="onChange">
    <van-cell-group inset>

      <van-field
        type="password"
        label="原密码"
        placeholder="请填写账号"
        name="old_pwd"
        v-model="pwdData.old_pwd"
        :rules="[{ required: true, message: '请填写账号！' }]"
      />

      <van-field
        type="password"
        label="新密码"
        placeholder="请填写密码"
        name="new_pwd"
        v-model="pwdData.new_pwd"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <van-field
        type="password"
        label="确认密码"
        placeholder="请填写确认密码"
        name="re_pwd"
        v-model="pwdData.re_pwd"
        :rules="[{ required: true, message: '请填写确认密码' },{ validator,message:'两次密码不一致！' }]"
      />

     
    </van-cell-group>
    <div style="margin: 0.16rem;">
      <van-button @click="confirmPwd" round block type="primary"> 确定 </van-button>
    </div>
  </van-form>
</template>

<script setup>

import {reactive,ref} from 'vue';
import {useRouter} from 'vue-router';
import {post,put,tip} from '@/common';

const router = useRouter();

const form = ref();

const pwdData = reactive({
    old_pwd:'',
    new_pwd:'',
    re_pwd:''
});

const validator = (re_pwd) => pwdData.new_pwd == re_pwd ;


const confirmPwd = async ()=>{
    try{
        await form.value.validate()
        await put('/security/password',pwdData);
        tip.success('密码修改成功!请重新登录。');
        router.replace({path:'/login'});
    }catch(err){
        console.log(err);
    }

};

</script>


<style scoped>
</style>
